<template>
	<view class="page-con select-date">
		<view class="top-tips">所选日期为房源当地时间</view>
		<view class="my-page-content">
			<view class="date-tips-con">
				<view class="date-tips">
					<span v-if="date[0] && date[1]">共{{ selectDateObj.totalDays }}晚</span>
					<span v-else>{{ btnText }}</span>
				</view>

				<view v-if="date[0]">
					{{ selectDateObj.startDate }} <span class="mr-5 ml-5"> - </span>
				</view>
				<view v-if="date[1]"> {{ selectDateObj.endDate }}</view>
			</view>


			<van-calendar title="日历" type="range" :max-date="maxDate" :min-date="minDate" :show-title="false"
				:default-date="null" :poppable="false" :show-confirm="false" :row-height="50" :max-range="300"
				@select="selectDate" @unselect="unselectDate" :formatter="formatter" class="calendar" ref="calendar" />


			<uni-load-more :status="status" />
		</view>
		<footBtn @nextStep="nextStep" cancelBtnText="清除日期" @cancel="clearDate" btnText="保 存" :type="2">
		</footBtn>
	</view>
</template>

<script>
	import footBtn from "@/components/myBtn/footBtn.vue";
	import store from "../../store/index.js";
	export default {
		components: {
			footBtn,
		},
		data() {
			return {
				maxDate: new Date().getTime() + 120 * 24 * 60 * 60 * 1000,
				minDate: new Date().getTime(),
				formData: {},
				date: [],
				selectList: [],
				pageData: {},
				disabDate: [],
				houseId: this.$getStorage("houseId"),
				roomInfo: this.$getStorage("roomInfo"),
				disableBtn: true,
				btnText: "选择入住日期",
				selectDateObj: this.$getStorage("selectDate"),
				formatter: (day) => {
					const roomInfo = this.$getStorage("roomInfo");
					if (roomInfo) {
						const date = this.$timestampToTime(day.date.getTime());
						if (
							roomInfo.disabled_date_range &&
							roomInfo.disabled_date_range.length > 0 &&
							roomInfo.disabled_date_range.includes(date)
						) {
							day.className = "disabledDate";
							day.type = "disabled";
							//     day.bottomInfo = '已租';
						}

						if (
							roomInfo.rentDate &&
							roomInfo.rentDate.length > 0 &&
							roomInfo.rentDate.includes(date)
						) {
							day.className = "disabledDate";
							day.type = "disabled";
							day.bottomInfo = "已租";
						}
					}

					if (day.type === "start") {
						day.bottomInfo = "入住";
					} else if (day.type === "end") {
						day.bottomInfo = "退房";
					}

					return day;
				},
				pageData: {
					pageType: 1, // 1首页
				},
				timer: null,
				status: 'more' // more/loading/noMore
			};
		},
		onReachBottom() {
			if (this.maxDate < new Date().getTime() + 730 * 24 * 60 * 60 * 1000) {
				this.status = 'loading';
				this.maxDate += 30.5 * 24 * 60 * 60 * 1000;
				this.$nextTick(() => {
					this.status = 'more';
				})
			} else {
				this.status = 'noMore';
			}
		},
		onLoad(option) {
			this.pageData = option;
			// clearTimeout(this.timer);
			// this.timer = setTimeout(() => {
			//   this.maxDate = new Date().getTime() + 730 * 24 * 60 * 60 * 1000;
			// }, 3000);
		},
		mounted() {
			if (this.selectDateObj) {
				this.date = store.state.searchData.date;
			}
			this.$refs.calendar.setData({
				currentDate: this.date,
			});
			// this.getRentDate();
		},
		destroyed() {
			clearTimeout(this.timer);
		},

		methods: {
			selectDate(data) {
				this.btnText = "选择入住日期";
				this.date = data.detail;
				if (this.date[0] && this.date[1]) {
					const timeDiff =
						new Date(this.date[1]).getTime() - new Date(this.date[0]).getTime();
					this.disableBtn = false;
					this.btnText = "保存";
					this.selectDateObj = {
						totalDays: Math.floor(timeDiff / (1000 * 60 * 60 * 24)),
						startDate: this.$timestampToTime1(this.date[0].getTime(), 2),
						endDate: this.$timestampToTime1(this.date[1].getTime(), 2),
						startTime: this.date[0].getTime(),
						endTime: this.date[1].getTime(),
						beginDate: this.$timestampToTime(this.date[0].getTime()),
						overDate: this.$timestampToTime(this.date[1].getTime()),
					};
				} else if (this.date[0] && !this.date[1]) {
					this.btnText = "选择离开日期";
					this.selectDateObj = {
						startDate: this.$timestampToTime1(this.date[0].getTime(), 2),
					};
				}
			},
			unselectDate(data) {},
			clearDate() {
				this.date = [];
				this.disableBtn = true;
				this.btnText = "选择入住日期";
				this.$refs.calendar.setData({
					currentDate: this.date,
				});
			},
			nextStep() {
				if (this.date.length == 0) {
					this.$removeStorage("selectDate");
					store.state.searchData.date = "";
					store.state.searchData.dateText = "";
					uni.navigateBack();
					return;
				}

				if (this.date[0] && !this.date[1]) {
					this.$toast("请选择离店日期");
					return;
				}
				if (this.selectDateObj.totalDays > 300) {
					this.$toast("最大可选300晚");
					return;
				}

				if (
					this.pageData.pageType != 1 &&
					this.roomInfo.days &&
					this.selectDateObj.totalDays < this.roomInfo.days
				) {
					this.$toast(`最少入住${this.roomInfo.days}晚`);
					return;
				}
				this.$setStorage("selectDate", this.selectDateObj);
				store.state.searchData.date = [
					this.selectDateObj.beginDate,
					this.selectDateObj.overDate,
				];
				store.state.searchData.dateText = [
					this.$timestampToTime(this.date[0].getTime(), 2),
					this.$timestampToTime(this.date[1].getTime(), 2),
				];

				uni.navigateBack();
			},
		},
	};
</script>

<style lang="scss">
	.page-con {
		.date-tips-con {
			width: 696rpx;
			height: 95rpx;
			background: #f9f9f9;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			margin: 20px auto;
			line-height: 95rpx;
			display: flex;
			font-size: 24rpx;
			color: #222222;

			.date-tips {
				font-weight: 500;
				font-size: 33rpx;
				margin: 0 10px;
			}
		}
	}

	.calendar {

		// --calendar-height: 618px;
		// position: relative;
		// top:0;
		// left:0;
		/* padding-bottom: 200rpx; */
		.van-calendar__header {
			// border: 1px solid red;
			// position: sticky;
			// top:0;
			// left:0;
		}
	}

	.top-tips {
		width: 100%;
		height: 54rpx;
		line-height: 54rpx;
		text-align: center;
		background: #fff8ee;
		font-weight: 400;
		font-size: 24rpx;
		color: #ec8403;
	}
</style>
<style lang="scss">
	.disabledDate {
		color: #b8b8b8 !important;
		position: relative;

		&::after {
			content: "";
			width: 70%;
			height: 2px;
			background-color: #b8b8b8;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
	}
</style>